<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head th:include="header">
    <title>资源管理-编辑</title>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="ibox float-e-margins">
            <div class="ibox-content">
                <form class="form-horizontal" id="fm" data-validator-option="{timely:3, focusCleanup:true, theme:'simple_bottom'}">
                    <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
                    <input type="hidden" name="id" th:value="${resource.id}">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">菜单名称：</label>
                        <div class="col-sm-8">
                            <input id="name" name="name" type="text" class="form-control" th:value="${resource.name}" data-rule="required;name;length(2~16)">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">菜单描述：</label>
                        <div class="col-sm-8">
                            <input id="description" name="description" type="text" class="form-control" th:value="${resource.description}" data-rule="required;description;length(2~16)">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">菜单图标：</label>
                        <div class="col-sm-8">
                            <input id="icon" name="icon" type="text" class="form-control" th:value="${resource.icon}" data-rule="length(~30)">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">资源路径：</label>
                        <div class="col-sm-8">
                            <input id="url" name="url" type="text" class="form-control" th:value="${resource.url}" data-rule="length(~100)">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">排序：</label>
                        <div class="col-sm-8">
                            <input id="seq" name="seq" type="text" class="form-control" th:value="${resource.seq}" data-rule="required;seq;integer(+0),length(~2)">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">状态：</label>
                        <div class="col-sm-8">
                            <select id="status" class="form-control" name="status">
                                <option value="0">正常</option>
                                <option value="1">停用</option>
                            </select>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">菜单类型：</label>
                        <div class="col-sm-8">
                            <select id="resourceType" class="form-control" name="resourceType">
                                <option value="0">菜单</option>
                                <option value="1">按钮</option>
                            </select>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">父级菜单：</label>
                        <div class="col-sm-8">
                            <input type="hidden" id="pid" name="pid" th:value="${resource.pid}">
                            <input id="pidName" name="pidName" class="form-control" readonly="readonly" th:value="${resource.pname}" onclick="MenuInfoDlg.showMenuSelectTree(); return false;"
                            />
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">打开方式：</label>
                        <div class="col-sm-8">
                            <select id="openMode" class="form-control" name="openMode">
                                <option value="ajax">ajax</option>
                                <option value="iframe">iframe</option>
                            </select>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">打开状态：</label>
                        <div class="col-sm-8">
                            <select id="opened" class="form-control" name="opened">
                                <option value="0">开启</option>
                                <option value="1">关闭</option>
                            </select>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <div class="text-center">
                            <button class="btn btn-primary" type="submit">保存</button>
                            <button class="btn btn-white" type="reset">重置</button>
                        </div>
                    </div>
                </form>
                <!-- 菜单选择的下拉框 -->
                <div id="menuContent" class="menuContent" style="display: none; position: absolute; z-index: 200;background-color: #ffffff !important;">
                    <ul id="menuTree" class="ztree tree-box" style="width: 249px !important;"></ul>
                </div>
            </div>
        </div>
    </div>
    <div th:include="footer"></div>
    <script type="text/javascript" th:inline="javascript">
        //下拉框默认值显示
        $(function(){
            var status = [[${resource.status}]];
            var resourceType = [[${resource.resourceType}]];
            var openMode = [[${resource.openMode}]];
            var opened = [[${resource.opened}]];
            //状态
            if (status == 0) {
                $("#status option[value='" + status + "']").attr("selected", "selected");
            }else {
                $("#status option[value='" + status + "']").attr("selected", "selected");
            }
            //菜单类型
            if (resourceType == 0) {
                $("#resourceType option[value='" + resourceType + "']").attr("selected", "selected");
            } else {
                $("#resourceType option[value='" + resourceType + "']").attr("selected", "selected");
            }
            //打开方式
            if (openMode == "ajax") {
                $("#openMode option[value='" + openMode + "']").attr("selected", "selected");
            } else {
                $("#openMode option[value='" + openMode + "']").attr("selected", "selected");
            }
            //打开状态
            if (opened == 0) {
                $("#opened option[value='" + opened + "']").attr("selected", "selected");
            } else {
                $("#opened option[value='" + opened + "']").attr("selected", "selected");
            }

        });
        var MenuInfoDlg = {};
        /**
         * 点击父级编号input框时
         */
        MenuInfoDlg.onClickMenu = function (e, treeId, treeNode) {
            $("#pid").attr("value", treeNode.id);
            $("#pidName").attr("value", instance.getSelectedVal());
        };

        /**
         * 显示父级菜单选择的树
         */
        MenuInfoDlg.showMenuSelectTree = function () {
            var menuObj = $("#pidName");
            var cityOffset = $("#pidName").offset();
            $("#menuContent").css({
                left: cityOffset.left + "px",
                top: cityOffset.top + menuObj.outerHeight() + "px"
            }).slideDown("fast");

            $("body").bind("mousedown", onBodyDown);
        };

        /**
		 * 隐藏父级菜单选择的树
		 */
        MenuInfoDlg.hideMenuSelectTree = function () {
            $("#menuContent").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);// mousedown当鼠标按下就可以触发，不用弹起
        };

        function onBodyDown(event) {
            if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(
                event.target).parents("#menuContent").length > 0)) {
                MenuInfoDlg.hideMenuSelectTree();
            }
        }

        $(function () {
            var ztree = new $ZTree("menuTree", basePath + "resource/selectMenuTree");
            ztree.bindOnClick(MenuInfoDlg.onClickMenu);
            ztree.init();
            instance = ztree;
        });

        $("#fm").validator({
            valid: function (form) {
                var me = this;
                // 提交表单之前，hold住表单，防止重复提交
                me.holdSubmit();
                $.ajax({
                    url: basePath + "resource/edit",
                    data: $(form).serialize(),
                    type: "POST",
                    dataType: 'json',
                    success: function (data) {
                        if (data.success) {
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.msg(data.msg, {
                                icon: 1,
                                time: 2000 //2秒关闭（如果不配置，默认是3秒）
                            }, function () {
                                window.parent.location.reload();
                                parent.layer.close(index);
                            });

                        } else {
                            parent.layer.msg(data.msg, {
                                icon: 2,
                                time: 2000 //2秒关闭（如果不配置，默认是3秒）
                            });
                            me.holdSubmit(false);
                        }
                    }
                });
            }
        });
    </script>
</body>

</html>